<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>ABOUT</title>
    <!-- Demo styles -->
    <style>


    </style>
    <script src="../font_ico/iconfont.js"></script>
    <!-- 引用bootstrap核心css -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <!-- 引用动画库 -->
    <link rel="stylesheet" href="../css/animate.min.css">

    <!-- 引用重置样式表 -->
    <link rel="stylesheet/less" href="../css/reset.less">

    <!-- 引用公共样式 -->
    <link rel="stylesheet/less" href="../css/common.less">

    <!-- 引用该页面样式 -->
    <link rel="stylesheet/less" href="../css/about.less">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">

</head>

<body>
<div class="warp">
    <div class="nav-mtop">
        <div>
            <div class="nav-mtop-l">
                <div><img src="" alt=""><span>Call Us: (0) 123 456 789</span></div>
                <div><img src="" alt=""><span>jetspace@mail.com</span></div>
            </div>
            <div class="nav-mtop-r">
                <img src="../images/gq1024.png" alt="">

                <select>
                    <option>中国</option>
                </select>
            </div>
        </div>

    </div>
    <header class="header" id="header">
        <!-- 导航 -->
        <nav class="navbar navbar-inverse">
            <div class="container">
                <!-- 移动端的导航按钮 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- logo -->
                    <a class="navbar-brand wow fadeInLeft" href="../index.html"><img src="../images/logo.png"></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <!-- 导航栏 -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- HOME          About          SERVICES          portfolio        -->
                        <li><a href="../index.html" class="wow fadeInRight" data-wow-delay="100ms">HOME</a></li>
                        <li><a href="./about.html" class="wow fadeInRight" data-wow-delay="200ms">About</a></li>
                        <li><a href="./servers.html" class="wow fadeInRight" data-wow-delay="300ms">SERVICES</a></li>
                        <li><a href="./blog.html" class="wow fadeInRight" data-wow-delay="300ms">BLOG</a></li>
                        <li><a href="./contact.html" class="wow fadeInRight" data-wow-delay="600ms">CONTACT</a></li>
                        <li>
                            <div><input type="text" placeholder="Search"> <img src="../images/ssIcon.png" alt=""></div>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <div class="mid-title">
        <div class="tips">
            <p class="p1">About Us</p>
            <p class="p2">Vivamus magna justo, lacinia eget consectetur sed, convallis at
            </p>
        </div>

        <img src="../images/Clouds3.png" alt="">
    </div>
    <div class="server">
        <div class="server-div">
            <img src="../images/Server.png" alt="">
            <div class="server-res-div">
                <h1>Super fast <span>servers</span></h1>
                <p class="p1">SAFE,FAST AND AWESOME PRICE</p>
                <p class="p2">Vestibulum ac diam sit amet quam vehicula elementum sed sit am</p>
                <ul>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gougou"></use>
                        </svg>
                        Super Special Offer/$2,99/MO
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gougou"></use>
                        </svg>
                        Unlimited Bandwidth and Space
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gougou"></use>
                        </svg>
                        Daily Backups
                    </li>
                </ul>

            </div>
        </div>
    </div>
    <div class="title-h">
        <h1>What We Do</h1>
    </div>

    <div class="container-fluid mune">
        <div class="row">
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>
            <div class="munelist1 col-lg-3 col-md-6 col-sm-12">
                <div class="munelist-in">
                    <div class="mune-l"><img src="../images/Icon2.png" alt=""></div>
                    <div class="mune-r">
                        <span class="p1">Modern Technology</span>
                        <span class="p2">Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <div class="title-h">
        <h1>The Team</h1>
    </div>
    <div class="container-fluid mune">
        <div class="row munelist">
            <div class="col-lg-3 col-md-6 col-sm-12">

                <div class="mune-bt">
                    <div>
                        <img class="ig3" src="../images/Clouds2.png">

                    </div>
                    <div class="mune-bt2">

                        <h3>John Doe</h3>
                        <span>Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>

                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">

                <div class="mune-bt">
                    <div>
                        <img class="ig3" src="../images/Clouds2.png">

                    </div>
                    <div class="mune-bt2">

                        <h3>John Doe</h3>
                        <span>Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>

                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">

                <div class="mune-bt">
                    <div>
                        <img class="ig3" src="../images/Clouds2.png">

                    </div>
                    <div class="mune-bt2">

                        <h3>John Doe</h3>
                        <span>Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>

                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">

                <div class="mune-bt">
                    <div>
                        <img class="ig3" src="../images/Clouds2.png">

                    </div>
                    <div class="mune-bt2">

                        <h3>John Doe</h3>
                        <span>Curabitur aliquet quam id dui posu ere blandit.Curabitur ae bla</span>
                    </div>

                </div>
            </div>


        </div>
    </div>
    <div class="mgs">
        <p>
            Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
            Donec sollicitudin molue in ipsum
        </p>
    </div>
    <div class="title-h">
        <h1>Our Company</h1>
    </div>
    <div class="banner-lunbo">
        

    </div>
    <div class="contact-us">
        <div>
            <h1>Feel free to contact us for custom plans</h1>

            <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
                Donec sollicitudin molue in ipsum</p>
            <a href="">Contact Us</a>

        </div>

    </div>
    <div class="end container-fluid">
        <div class="endlist row">
            <div class="col-lg-3 col-md-6">
                <p class="p1">Menu</p>
                <ul>
                    <li>HOME</li>
                    <li>SERVICES</li>
                    <li>ABOUT US</li>
                    <li>BLOG</li>
                    <li>CONTACT US</li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 ">
                <p class="p1">We Offer</p>
                <ul>
                    <li>BUSINESS HOSTING</li>
                    <li>PRIVATE HOSTING</li>
                </ul>
                <p class="p1">Service</p>
                <ul>
                    <li>FIRST SERVICE</li>
                    <li>SECOND SERVICE</li>
                    <li>FIRST SERVICE</li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 ">
                <p class="p1">Our Blog</p>
                <p class="p2">Lorem Ipsum sample text</p>
                <p class="p3">Vivamus suscipit tortor eget felis porttitor
                    volutpat. Curabitur arcu erat, accumsan id
                    imperdiet et, porttitor at sem. Curabitur arcu
                    erat, accumsan.
                </p>
                <p class="p4">Read More</p>
            </div>
            <div class="col-lg-3 col-md-6 ">
                <p class="p1">We Are Social</p>
                <img src="../images/Social%20Icons.png" alt="">
            </div>
        </div>
        <img src="../images/Clouds3.png" alt="">
    </div>



</div>
</body>

</html>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/wow.min.repeat.js"></script>
<script src="../js/less.min.js"></script>
<script src="../js/swiper-bundle.min.js"></script>

<script>
    //实例化wow.js
    new WOW().init();
    var swiper = new Swiper(".mySwiper", {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

</script>